import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import _ from 'loadsh'
import { TitleLine, TextLine, TextCell, Split } from '@components/ApprovePre/Approve'
import style from './Step.module.less'
import { download } from '@js/downloadRename'
// import ClaimListShower from './components/ClaimListShower'

export default class StepOneHistory extends Component {
  state = {
    keyTitleMap: {}
  }

  // 格式化日期
  formatDate (date) {
    if (date) {
      return moment(date * 1000).format('YYYY-MM-DD HH:mm')
    }
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.action || {}, 'vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  // 获取完整key值
  getKey (key) {
    const { preKey } = this.props
    return `${preKey}_${key}`
  }

  // 获取值
  getValueByKey (key, nullValue = '无') {
    const { action, preKey } = this.props
    const { varsMap } = action
    return (varsMap[`${preKey}_${key}`] || {}).value || nullValue
  }

  // 根据key获取标题
  getTitleByKey (key) {
    const { keyTitleMap } = this.state
    return keyTitleMap[this.getKey(key)]
  }

  formatTime (v) {
    if (!v) {
      return '无'
    }
    return moment(v * 1000).format('YYYY-MM-DD')
  }

  getFile () {
    const l = this.getValueByKey('fileid', null)
    return l ? l[0] : null
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
  }

  renderType () {
    if (this.props.preKey !== 'claimamend') {
      return null
    }
    const v = this.getValueByKey.bind(this)
    const t = this.getTitleByKey.bind(this)
    return (
      <TextLine>
        <TextCell>{t('amend_type')}：{v('amend_type')}</TextCell>
      </TextLine>
    )
  }

  render () {
    const { action } = this.props
    const v = this.getValueByKey.bind(this)
    const t = this.getTitleByKey.bind(this)
    const file = this.getFile()
    return (
      <div>
        <TitleLine title={this.props.action.step_name} operator={action.operator} time={this.formatDate(action.complete_datetime)} />
        <TextLine>
          <TextCell>{t('submittal')}：{v('submittal')}</TextCell>
          <Split />
          <TextCell>{t('create_datetime')}：{this.formatTime(v('create_datetime', null))}</TextCell>
          <Split />
          <TextCell>
            {t('fileid')}：{file ? <a className={style.link} onClick={() => download(file.path, file.original_filename)}>{file.original_filename}</a> : '无'}
          </TextCell>
        </TextLine>
        {this.renderType()}
        {/* <TextLine>
          <TextCell style={{ width: '65%' }}>
            <ClaimListShower title={t('claim')} data={v('claim')} />
          </TextCell>
        </TextLine> */}
        {/* <TextLine>
          <TextCell style={{ width: '65%' }}>{t('statement')}：{v('statement')}</TextCell>
        </TextLine> */}
        <TextLine>
          <TextCell style={{ width: '65%' }}>{action.remark_alias || '备注'}：{action.remark || '无'}</TextCell>
        </TextLine>
      </div>
    )
  }
}

StepOneHistory.proptypes = {
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  action: PropTypes.object,
  preKey: PropTypes.string
}

StepOneHistory.defaultProps = {
  userInfo: {},
  instance: {},
  action: {},
  preKey: ''
}
